<template>
  <div>
    <el-popover
      v-model="showemoji"
      popper-class="popper-box"
      :visible-arrow="false"
      placement="top"
      width="385"
    >
      <div class="emojibox" v-if="showemoji">
        <el-carousel
          height="360"
          :initial-index="0"
          :autoplay="false"
          arrow="never"
          indicator-position="outside"
          class="w_full h_full emojicarousel"
        >
          <el-carousel-item
            v-for="(item, index) in emoji"
            :key="index"
            class="w_full h_full flex flexwrap"
          >
            <a
              v-for="(icon, eIndex) in item"
              :key="eIndex"
              class="iconbox flexcenter"
              @click="chooseEmoji(icon)"
            >
              <img :src="icon.icon" alt />
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div slot="reference" style="text-align: center; cursor: pointer"> -->
      <!-- <el-tooltip
        class="item"
        effect="dark"
        content="表情"
        placement="top-start"
      > -->
      <svg-icon
        slot="reference"
        class-name="mr-16 icontool commhover"
        icon-class="itool1"
      />
      <!-- </el-tooltip> -->
      <!-- </div> -->
    </el-popover>
  </div>
</template>

<script>
import { emoji } from "@/assets/icons/emoji.js";
export default {
  data() {
    return {
      showemoji: false,
      emoji: this.splitArray(emoji, 72), //表情包
    };
  },
  methods: {
    chooseEmoji(icon) {
      this.$emit("chooseEmoji", icon);
    },
  },
};
</script>

<style lang="scss" scoped>
.emojibox {
  width: 360px;
  height: 360px;
  padding-top: 10px;
  overflow-y: auto;
  border-radius: 4px;
}
.iconbox {
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  margin: 1px;
  border-radius: 4px;
  &:hover {
    background-color: #eee;
  }
  img {
    width: 24px;
    height: 24px;
  }
}
.emojicarousel {
  ::v-deep .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #ddd;
  }
  ::v-deep .el-carousel__container{
    height: 310px;
  }
}
.icontool {
  width: 22px;
  height: 22px;
  color: #575757;
}
</style>